<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no">
    <title>签到</title>
    <style>
        @charset 'utf-8';
        a, body {
            color: #666
        }

        .page, body {
            width: 100%
        }

        .loading-main .loading-img-main, .page {
            text-align: center
        }

        html {
            height: 100%;
            margin: 0 auto
        }

        body, html {
            -webkit-user-select: element;
            user-select: element;
            letter-spacing: 0;
            background: #f8f9fa;
            -webkit-touch-callout: none
        }

        .fn-clear:after {
            visibility: hidden;
            height: 0
        }

        body {
            font-family: arial, sans-serif;
            font-size: 16px;
            min-height: 100%;
            -webkit-text-size-adjust: none
        }

        body, button, dd, dl, dt, footer, h1, h2, h3, h4, h5, h6, input, li, nav, ol, p, textarea, ul {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            -webkit-font-smoothing: antialiased
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: 100%;
            font-weight: 400
        }

        form {
            display: inline
        }

        ol, ul {
            list-style: none
        }

        a {
            text-decoration: none
        }

        img {
            vertical-align: middle;
            -ms-interpolation-mode: bicubic;
            border: 0
        }

        em, strong {
            font-weight: 400;
            font-style: normal;
            font-variant: normal
        }

        button, input, select, textarea {
            font-size: 100%;
            vertical-align: middle;
            outline: 0
        }

        a, button, input, select, textarea {
            -webkit-tap-highlight-color: transparent
        }

        textarea {
            resize: none
        }

        button, input[type=button], input[type=reset], input[type=submit] {
            cursor: pointer;
            -webkit-appearance: button;
            -moz-appearance: button
        }

        input:focus:-moz-placeholder, input:focus::-webkit-input-placeholder {
            color: transparent
        }

        button::-moz-focus-inner, input::-moz-focus-inner {
            padding: 0;
            border: 0
        }

        table {
            border-spacing: 0;
            border-collapse: collapse
        }

        .fn-clear {
            zoom: 1
        }

        .fn-clear:after {
            font-size: 0;
            display: block;
            clear: both;
            content: ' '
        }

        .fl, .fr {
            display: inline
        }

        .fl {
            float: left
        }

        .fr {
            float: right
        }

        .hide {
            display: none
        }

        .show {
            display: block
        }

        .ellipsis {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis
        }

        .break {
            word-wrap: break-word;
            word-break: break-all
        }

        .flex, .fn-flex {
            display: -webkit-box;
            display: box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex
        }

        .flex-v, .fn-flex.tb {
            flex-direction: column;
            -webkit-flex-flow: column;
            flex-flow: column;
            -ms-flex-direction: column;
            -webkit-box-orient: vertical;
            box-orient: vertical
        }

        article, footer, header, hgroup, menu, nav, section {
            display: block;
            clear: all
        }

        .container {
            max-width: 800px;
            margin: 0 auto
        }

        .page {
            font-size: 12px;
            padding: 15px 0
        }

        .page > span {
            color: #666
        }

        .page > span.not {
            color: #ccc
        }

        .flex-1 {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1
        }

        .flex-2 {
            -webkit-box-flex: 2;
            -webkit-flex: 2;
            -ms-flex: 2;
            flex: 2
        }

        .flex-3 {
            -webkit-box-flex: 3;
            -webkit-flex: 3;
            -ms-flex: 3;
            flex: 3
        }

        .flex-align-center {
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center
        }

        .flex-pack-center {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center
        }

        .flex-pack-justify {
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between
        }

        .flex-pack-start {
            -webkit-box-pack: start;
            -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
            justify-content: flex-start
        }

        .flex-pack-end {
            -webkit-box-pack: end;
            -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
            justify-content: flex-end
        }

        .flex-warp {
            -ms-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap
        }

        .flex-direction-bottom {
            flex-direction: column-reverse;
            -webkit-flex-direction: column-reverse;
            -webkit-box-pack: end;
            -ms-box-pack: end
        }

        .user-select {
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none
        }

        .border-small-top, .border-small-bottom {
            position: relative;
        }

        .border-small-top:after, .border-small-bottom:before {
            content: "  ";
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 200%;
            height: 1px;
            background: #ddd;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scale(.5, .5);
            transform: scale(.5, .5);
        }

        .border-small-top:after {
            left: 0;
            top: 0;
        }

        .border-small-bottom:before {
            left: 0;
            top: 100%;
        }

        .icon {
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
    <style>
        .top {
            width: 100%;
            height: 12rem;
            background: #007aff;
            margin-bottom: .8rem;
            overflow: hidden;
        }

        .top .out-1 {
            width: 8rem;
            height: 8rem;
            border-radius: 100%;
            -webkit-border-radius: 100%;
            background: rgba(255, 255, 255, 0.4);
            margin: 1rem auto 0 auto;
        }

        .top .out-1 .out-2 {
            width: 7rem;
            height: 7rem;
            border-radius: 100%;
            -webkit-border-radius: 100%;
            background: #ffffff;
            margin: 0 auto;
        }

        .top .out-1 .out-2 .signBtn {
            width: 6.2rem;
            height: 6.2rem;
            border-radius: 100%;
            -webkit-border-radius: 100%;
            border: 1px #7ebdff solid;
        }

        .top .out-1 .out-2 .signBtn strong, .top .out-1 .out-2 .signBtn span {
            display: block;
            width: 85%;
            margin: 0 auto;
            text-align: center;
            color: #007aff;
        }

        .top .out-1 .out-2 .signBtn strong {
            height: 3.5rem;
            line-height: 4.5rem;
            font-weight: 600;
            border-bottom: 1px #eee solid;
        }

        .top .out-1 .out-2 .signBtn span {
            height: 2.5rem;
            line-height: 2.5rem;
            font-size: .9rem;
            line-height: 2rem !important;
        }

        .top .out-1:active {
            animation: sign .25s forwards;
            -webkit-animation: sign .25s forwards;
        }

        .tips {
            position: absolute;
            top: 10rem;
            z-index: 999;
            width: 100%;
            color: #fff;
            font-size: .9rem;
            text-align: center;
            padding-bottom: .5rem;
        }

        .Calendar {
            background: #fff;
            padding-bottom: 1rem;
        }

        .Calendar #toyear {
            border-bottom: 1px #e7e7e7 solid;
            width: 96%;
            margin: 0 auto;
            height: 2.5rem;
            text-align: center;
            color: #333;
            font-size: .95rem;
        }

        .Calendar #toyear .year-month {
            height: 100%;
            line-height: 2.5rem;
        }

        .Calendar #toyear #idCalendarPre, .Calendar #toyear #idCalendarNext {
            height: 100%;
            line-height: 2.5rem;
            padding: 0 2rem;
            text-align: center;
            font-size: .85rem;
            color: #999;
        }

        .Calendar table, .Calendar tr, .Calendar td {
            border: 0;
        }

        .Calendar table {
            width: 96%;
            margin: 0 auto;
        }

        .Calendar table tr {
            text-align: center;
            height: 2rem;
        }

        .Calendar table tr td span {
            margin: 0 auto;
            display: block;
            line-height: 1.6rem;
            width: 1.5rem;
            height: 1.5rem;
            font-size: .9rem;
            border-radius: 100%;
        }

        .Calendar table tr .onToday span {
            background: #1485ff;
            color: #fff;
        }
    </style>
    <!--<link rel="stylesheet" href="public.css" />
    <link rel="stylesheet" href="signin.css" />-->
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/myProfiles.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script src="/js/common.js"></script>


</head>
<body style="background: url('/upload/2.bmp')">
<div class="top flex flex-align-end flex-pack-center flex-warp">
    <a href="profiles.html">
        <span><img src="/img/icon/timg1.png" width="20px"></span>
    </a>
    <div class="out-1 flex flex-align-center flex-pack-center" id="signIn">
        <div class="out-2 flex flex-align-center flex-pack-center">
            <div class="signBtn">
                <strong id="sign-txt">签到</strong>
                <span>连续<em id="sign-count">0</em>天</span>
            </div>
        </div>
    </div>
</div>

<div class="tips">今日签到</div>
<div class="Calendar">
    <div id="toyear" class="flex flex-pack-center">
        <div id="idCalendarPre">&lt;</div>

        <div class="year-month">
            <span id="idCalendarYear">2018</span>年<span id="idCalendarMonth">6</span>月
        </div>

        <div id="idCalendarNext">&gt;</div>
    </div>

    <table border="1px" cellpadding="0" cellspacing="0">
        <thead>
        <tr class="tou">
            <td>日</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
        </tr>
        </thead>
        <tbody id="idCalendar">
        </tbody>
    </table>
</div>
<script type="text/javascript">
    var $$ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };
    var Class = {
        create: function () {
            return function () {
                this.initialize.apply(this, arguments)
            }
        }
    };
    Object.extend = function (destination, source) {
        for (var property in source) {
            destination[property] = source[property]
        }
        return destination;
    }
    var Calendar = Class.create();
    Calendar.prototype = {
        initialize: function (container, options) {
            this.Container = $$(container); //容器(table结构)
            this.Days = []; //日期对象列表
            this.SetOptions(options);
            this.Year = this.options.Year;
            this.Month = this.options.Month;
            this.onToday = this.options.onToday;
            this.onSignIn = this.options.onSignIn;
            this.onFinish = this.options.onFinish;
            this.qdDay = this.options.qdDay;
            this.isSignIn = false;
            this.Draw();
        },  //设置默认属性
        SetOptions: function (options) {
            this.options = { //默认值
                Year: new Date().getFullYear(), //显示年
                Month: new Date().getMonth() + 1, //显示月
                qdDay: null,
                onToday: function () {
                }, //已签到
                onSignIn: function () {
                }, //今天是否签到
                onFinish: function () {
                } //日历画完后触发
            };
            Object.extend(this.options, options || {});
        },
        //上一个月
        PreMonth: function () {
            //先取得上一个月的日期对象
            var d = new Date(this.Year, this.Month - 2, 1);
            //再设置属性
            this.Year = d.getFullYear();
            this.Month = d.getMonth() + 1;
            //重新画日历
            this.Draw();
        },
        //下一个月
        NextMonth: function () {
            var d = new Date(this.Year, this.Month, 1);
            this.Year = d.getFullYear();
            this.Month = d.getMonth() + 1;
            this.Draw();
        },
        //画日历
        Draw: function () {
            //签到日期
            var day = this.qdDay;   //日期列表
            var arr = [];
            //用当月第一天在一周中的日期值作为当月离第一天的天数
            for (var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++) {
                arr.push("&nbsp;");
            }   //用当月最后一天在一个月中的日期值作为当月的天数
            for (var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++) {
                arr.push(i);
            }
            var frag = document.createDocumentFragment();
            this.Days = [];
            while (arr.length > 0) {    //每个星期插入一个tr
                var row = document.createElement("tr");    //每个星期有7天
                for (var i = 1; i <= 7; i++) {
                    var cell = document.createElement("td");
                    cell.innerHTML = "&nbsp;";
                    if (arr.length > 0) {
                        var d = arr.shift();
                        cell.innerHTML = "<span>" + d + "</span>";
                        if (d > 0 && day.length) {
                            for (var ii = 0; ii < day.length; ii++) {
                                this.Days[d] = cell;        //已签到
                                if (this.IsSame(new Date(this.Year, this.Month - 1, d), day[ii])) {
                                    this.onToday(cell);
                                }        //判断今天是否签到
                                if (this.checkSignIn(new Date(), day[ii])) {
                                    this.onSignIn();
                                }
                            }
                        }
                    }
                    row.appendChild(cell);
                }
                frag.appendChild(row);
            }
            //先清空内容再插入(ie的table不能用innerHTML)
            while (this.Container.hasChildNodes()) {
                this.Container.removeChild(this.Container.firstChild);
            }
            this.Container.appendChild(frag);
            this.onFinish();
            if (this.isSignIn) {
                this.isSignIn = false;
                return this.SignIn();
            }
        },
        //是否签到
        IsSame: function (d1, d2) {
            d2 = new Date(d2 * 1000);
            return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
        },
        //今天是否签到
        checkSignIn: function (d1, d2) {
            d2 = new Date(d2 * 1000);
            return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
        },
        //签到
        SignIn: function () {
            var now = new Date();
            var Year = now.getFullYear();
            var Month = now.getMonth() + 1;
            if (Year != this.Year || Month != this.Month) {
                this.Year = Year;
                this.Month = Month;
                this.isSignIn = true;
                return this.Draw();
            }
            var day = now.getDate();
            var arr = new Array();
            var tb = document.getElementById('idCalendar');
            for (var i = 0; i < tb.rows.length; i++) {
                for (var j = 0; j < tb.rows[i].cells.length; j++) {
                    if (day == tb.rows[i].cells[j].innerText && Year == this.Year && Month == this.Month) {
                        if (tb.rows[i].cells[j].className == "onToday") {
                            return 2;
                        }
                        tb.rows[i].cells[j].className = "onToday"
                        this.qdDay.push(Date.parse(new Date()) / 1000)
                        return 1;
                    }
                }
            }
        }
    };


</script>
<script language="JavaScript">
    var isSign = false;
    var myday = new Array(); //已签到的数组
    $.get(baseUrl + "/users/" + user.id + "/signDate", function (data) {
        $.each(data, function (index, ele) {
            myday.push('' + ele / 1000);
        });
        //myday[0] = "1562947200";
        //myday[1] = "15628608000";
        //  myday[2] = "1562947200";
        var cale = new Calendar("idCalendar", {
            qdDay: myday,
            onToday: function (o) {
                o.className = "onToday";
            },
            onSignIn: function () {
                $$("sign-txt").innerHTML = '已签到';
            },
            onFinish: function () {
                $$("sign-count").innerHTML = myday.length; //已签到次数
                $$("idCalendarYear").innerHTML = this.Year;
                $$("idCalendarMonth").innerHTML = this.Month; //表头年份
            }
        });
        $$("idCalendarPre").onclick = function () {
            cale.PreMonth();
        }
        $$("idCalendarNext").onclick = function () {
            cale.NextMonth();
        }//添加今天签到
        $("#signIn").click( function () {
            if (isSign == false) {
                var res = cale.SignIn();
                if (res == '1') {
                    $$("sign-txt").innerHTML = '已签到';
                    $$("sign-count").innerHTML = parseInt($$("sign-count").innerHTML) + 1;
                    isSign = true;
                    //拼接日期字符串
                    var year = $("#idCalendarYear").html();
                    var month = $("#idCalendarMonth").html();
                    var day = $("#idCalendar .onToday span:last").html();
                    var signDate = '';
                    if (month.length == 1) {
                        var signDate = year + "-" + "0" + month + "-" + day;
                    } else {
                        var signDate = year + "-" + month + "-" + day;
                    }
                    //将日期更更新到数据库
                    $.post(baseUrl + "/users/" + user.id + "/signDate", {signDate: signDate})
                    //弹出提示框
                    $(document).dialog({
                        titleText: '签到成功!',
                        content: '签到成功,积分增加10!',
                    });
                }
                else if (res == '2') {
                    $$("sign-txt").innerHTML = '已签到';
                    $(document).dialog({
                        titleText: '提示!',
                        content: '今天已经签到了',
                    });
                }
            }
            else {
                $(document).dialog({
                    titleText: '提示!',
                    content: '今天已经签到了',
                });
            }
        })
    });
</script>
</body>
</html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
